import { Space, Button } from 'antd'
import { useRef } from 'react'
import { EyeOutlined, SaveOutlined } from '@ant-design/icons'
import ConfigList from './config-list/index.jsx'
import ConfigFormContext from './configFormContext.js'
import { ContainerLayout, CommonTitle } from '@/components'
const PageList = (props) => {
  const { typeName } = props.config

  const configListRef = useRef()

  const pageHeaderExtra = (
    <Space>
      <Button type="primary" onClick={() => configListRef.current.view()}>
        查看协议
      </Button>
      <Button type="primary" onClick={() => configListRef.current.save()}>
        保存
      </Button>
    </Space>
  )

  const configFormContextValue = {
    showIcon: false,
  }

  return (
    <div className="top-bottom-layout">
      <div className='flex-row'>
        <CommonTitle type="large">{typeName + '配置'}</CommonTitle>
        <div className='flex-row flex-1 flex-end'>
          <Space>
            <Button
              className="icon-btn"
              size="small"
              title='查看协议'
              icon={<EyeOutlined />}
              onClick={() => configListRef.current.view()}
            ></Button>
            <Button
              className="icon-btn"
              size="small"
              title='保存'
              icon={<SaveOutlined />}
              onClick={() => configListRef.current.save()}
            ></Button>
          </Space>
        </div>
      </div>

      <ContainerLayout className="flex-1">
        <ConfigFormContext.Provider value={configFormContextValue}>
          <ConfigList
            ref={configListRef}
            projectId={props.projectId}
            config={props.config}
          />
        </ConfigFormContext.Provider>
      </ContainerLayout>
    </div>
  )
}

export default PageList
